<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>CSS3鼠标悬停图片动画DEMO演示02</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/set2.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>

<div class="container">

	<header class="codrops-header">
		<h1>鼠标悬停</h1>
		<nav class="codrops-demos">
			<a href="index.html">Set 1</a>
			<a class="current-demo" href="index2.html">Set 2</a>
		</nav>
	</header>
	<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
	<div class="content">
	
		<h2>Julia</h2>
		<div class="grid">
			<figure class="effect-julia">
				<img src="img/21.jpg" alt="img21"/>
				<figcaption>
					<h2>Passionate <span>Julia</span></h2>
					<div>
						<p>Julia dances in the deep dark</p>
						<p>She loves the smell of the ocean</p>
						<p>And dives into the morning light</p>
					</div>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-julia">
				<img src="img/22.jpg" alt="img22"/>
				<figcaption>
					<h2>Passionate <span>Julia</span></h2>
					<div>
						<p>Julia dances in the deep dark</p>
						<p>She loves the smell of the ocean</p>
						<p>And dives into the morning light</p>
					</div>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Goliath</h2>
		<div class="grid">
			<figure class="effect-goliath">
				<img src="img/23.jpg" alt="img23"/>
				<figcaption>
					<h2>Thoughtful <span>Goliath</span></h2>
					<p>When Goliath comes out, you should run.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-goliath">
				<img src="img/24.jpg" alt="img24"/>
				<figcaption>
					<h2>Thoughtful <span>Goliath</span></h2>
					<p>When Goliath comes out, you should run.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Hera</h2>
		<div class="grid">
			<figure class="effect-hera">
				<img src="img/17.jpg" alt="img17"/>
				<figcaption>
					<h2>Tender <span>Hera</span></h2>
					<p>
						<a href="#"><i class="fa fa-fw fa-file-pdf-o"></i></a>
						<a href="#"><i class="fa fa-fw fa-file-image-o"></i></a>
						<a href="#"><i class="fa fa-fw fa-file-archive-o"></i></a>
						<a href="#"><i class="fa fa-fw fa-file-code-o"></i></a>
					</p>
				</figcaption>			
			</figure>
			<figure class="effect-hera">
				<img src="img/25.jpg" alt="img25"/>
				<figcaption>
					<h2>Tender <span>Hera</span></h2>
					<p>
						<a href="#"><i class="fa fa-fw fa-file-pdf-o"></i></a>
						<a href="#"><i class="fa fa-fw fa-file-image-o"></i></a>
						<a href="#"><i class="fa fa-fw fa-file-archive-o"></i></a>
						<a href="#"><i class="fa fa-fw fa-file-code-o"></i></a>
					</p>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Winston</h2>
		<div class="grid">
			<figure class="effect-winston">
				<img src="img/30.jpg" alt="img30"/>
				<figcaption>
					<h2>Jolly <span>Winston</span></h2>
					<p>
						<a href="#"><i class="fa fa-fw fa-star-o"></i></a>
						<a href="#"><i class="fa fa-fw fa-comments-o"></i></a>
						<a href="#"><i class="fa fa-fw fa-envelope-o"></i></a>
					</p>
				</figcaption>			
			</figure>
			<figure class="effect-winston">
				<img src="img/1.jpg" alt="img01"/>
				<figcaption>
					<h2>Jolly <span>Winston</span></h2>
					<p>
						<a href="#"><i class="fa fa-fw fa-star-o"></i></a>
						<a href="#"><i class="fa fa-fw fa-comments-o"></i></a>
						<a href="#"><i class="fa fa-fw fa-envelope-o"></i></a>
					</p>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Selena</h2>
		<div class="grid">
			<figure class="effect-selena">
				<img src="img/10.jpg" alt="img10"/>
				<figcaption>
					<h2>Happy <span>Selena</span></h2>
					<p>Selena is a tiny-winged bird.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-selena">
				<img src="img/31.jpg" alt="img31"/>
				<figcaption>
					<h2>Happy <span>Selena</span></h2>
					<p>Selena is a tiny-winged bird.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Terry</h2>
		<div class="grid">
			<figure class="effect-terry">
				<img src="img/16.jpg" alt="img16"/>
				<figcaption>
					<h2>Noisy <span>Terry</span></h2>
					<p>
						<a href="#"><i class="fa fa-fw fa-download"></i></a>
						<a href="#"><i class="fa fa-fw fa-heart"></i></a>
						<a href="#"><i class="fa fa-fw fa-share"></i></a>
						<a href="#"><i class="fa fa-fw fa-tags"></i></a>
					</p>
				</figcaption>			
			</figure>
			<figure class="effect-terry">
				<img src="img/26.jpg" alt="img26"/>
				<figcaption>
					<h2>Noisy <span>Terry</span></h2>
					<p>
						<a href="#"><i class="fa fa-fw fa-download"></i></a>
						<a href="#"><i class="fa fa-fw fa-heart"></i></a>
						<a href="#"><i class="fa fa-fw fa-share"></i></a>
						<a href="#"><i class="fa fa-fw fa-tags"></i></a>
					</p>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Phoebe</h2>
		<div class="grid">
			<figure class="effect-phoebe">
				<img src="img/3.jpg" alt="img03"/>
				<figcaption>
					<h2>Plain <span>Phoebe</span></h2>
					<p>
						<a href="#"><i class="fa fa-fw fa-user"></i></a>
						<a href="#"><i class="fa fa-fw fa-heart"></i></a>
						<a href="#"><i class="fa fa-fw fa-cog"></i></a>
					</p>
				</figcaption>			
			</figure>
			<figure class="effect-phoebe">
				<img src="img/7.jpg" alt="img07"/>
				<figcaption>
					<h2>Plain <span>Phoebe</span></h2>
					<p>
						<a href="#"><i class="fa fa-fw fa-user"></i></a>
						<a href="#"><i class="fa fa-fw fa-heart"></i></a>
						<a href="#"><i class="fa fa-fw fa-cog"></i></a>
					</p>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Apollo</h2>
		<div class="grid">
			<figure class="effect-apollo">
				<img src="img/18.jpg" alt="img18"/>
				<figcaption>
					<h2>Strong <span>Apollo</span></h2>
					<p>Apollo's last game of pool was so strange.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-apollo">
				<img src="img/22.jpg" alt="img22"/>
				<figcaption>
					<h2>Strong <span>Apollo</span></h2>
					<p>Apollo's last game of pool was so strange.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Kira</h2>
		<div class="grid">
			<figure class="effect-kira">
				<img src="img/17.jpg" alt="img17"/>
				<figcaption>
					<h2>Dark <span>Kira</span></h2>
					<p>
						<a href="#"><i class="fa fa-fw fa-home"></i></a>
						<a href="#"><i class="fa fa-fw fa-download"></i></a>
						<a href="#"><i class="fa fa-fw fa-heart"></i></a>
						<a href="#"><i class="fa fa-fw fa-share"></i></a>
					</p>
				</figcaption>			
			</figure>
			<figure class="effect-kira">
				<img src="img/5.jpg" alt="img05"/>
				<figcaption>
					<h2>Dark <span>Kira</span></h2>
					<p>
						<a href="#"><i class="fa fa-fw fa-home"></i></a>
						<a href="#"><i class="fa fa-fw fa-download"></i></a>
						<a href="#"><i class="fa fa-fw fa-heart"></i></a>
						<a href="#"><i class="fa fa-fw fa-share"></i></a>
					</p>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Steve</h2>
		<div class="grid">
			<figure class="effect-steve">
				<img src="img/29.jpg" alt="img29"/>
				<figcaption>
					<h2>Lonely <span>Steve</span></h2>
					<p>Steve was afraid of the Boogieman.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-steve">
				<img src="img/33.jpg" alt="img33"/>
				<figcaption>
					<h2>Lonely <span>Steve</span></h2>
					<p>Steve was afraid of the Boogieman.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Moses</h2>
		<div class="grid">
			<figure class="effect-moses">
				<img src="img/24.jpg" alt="img24"/>
				<figcaption>
					<h2>Cute <span>Moses</span></h2>
					<p>Moses loves to run after butterflies.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-moses">
				<img src="img/20.jpg" alt="img20"/>
				<figcaption>
					<h2>Cute <span>Moses</span></h2>
					<p>Moses loves to run after butterflies.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Jazz</h2>
		<div class="grid">
			<figure class="effect-jazz">
				<img src="img/25.jpg" alt="img25"/>
				<figcaption>
					<h2>Dynamic <span>Jazz</span></h2>
					<p>When Jazz starts to chase cars, the whole world stands still.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-jazz">
				<img src="img/6.jpg" alt="img06"/>
				<figcaption>
					<h2>Dynamic <span>Jazz</span></h2>
					<p>When Jazz starts to chase cars, the whole world stands still.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Ming</h2>
		<div class="grid">
			<figure class="effect-ming">
				<img src="img/9.jpg" alt="img09"/>
				<figcaption>
					<h2>Funny <span>Ming</span></h2>
					<p>Ming sits in the corner the whole day. She's into crochet.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-ming">
				<img src="img/8.jpg" alt="img08"/>
				<figcaption>
					<h2>Funny <span>Ming</span></h2>
					<p>Ming sits in the corner the whole day. She's into crochet.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Lexi</h2>
		<div class="grid">
			<figure class="effect-lexi">
				<img src="img/12.jpg" alt="img12"/>
				<figcaption>
					<h2>Altruistic <span>Lexi</span></h2>
					<p>Each and every friend is special. Lexi won't hide a single cookie.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-lexi">
				<img src="img/3.jpg" alt="img03"/>
				<figcaption>
					<h2>Altruistic <span>Lexi</span></h2>
					<p>Each and every friend is special. Lexi won't hide a single cookie.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
		<h2>Duke</h2>
		<div class="grid">
			<figure class="effect-duke">
				<img src="img/27.jpg" alt="img27"/>
				<figcaption>
					<h2>Messy <span>Duke</span></h2>
					<p>Duke is very bored. When he looks at the sky, he feels to run.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
			<figure class="effect-duke">
				<img src="img/17.jpg" alt="img17"/>
				<figcaption>
					<h2>Messy <span>Duke</span></h2>
					<p>Duke is very bored. When he looks at the sky, he feels to run.</p>
					<a href="#">View more</a>
				</figcaption>			
			</figure>
		</div>
		
	</div>
	<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90-2.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
	<nav class="codrops-demos">
		<a href="index.html">Set 1</a>
		<a class="current-demo" href="index2.html">Set 2</a>
	</nav>
	
</div><!-- /container -->

<script>
// For Demo purposes only (show hover effect on mobile devices)
[].slice.call( document.querySelectorAll('a[href="#"') ).forEach( function(el) {
	el.addEventListener( 'click', function(ev) { ev.preventDefault(); } );
} );
</script>

</body>
</html>